//商品详细页
@import "common.less";

#content{
    // 商品标题
    .title{
        margin-top:10px;
        a{
            font-size:13px;
        }
        // 商品名称 
        .proTitle{
           margin-top:20px;
           padding-left:15px;
           border-bottom:1px solid @bordercolor;
           padding-bottom:8px;
           margin-bottom: 15px;
           
           .of;           
           .left{
               .flf;
               //主商品名称
               
               h1{
                font-size: 18px;
                .ff;     
               }           
           }
           //右边连接
           .right{
               .flr;
               height:24px;
               line-height: 30px;
               a{
                   font-size: 15px;
                   line-height: 25px;
                   color:#808080;
                   margin-left:10px;
                   padding-right:15px;
                   border-right:1px solid @bordercolor;
               }
           }
        }
    }
   
    //商品详细细节内容
    .proArea{
        //左边图片展示
        .left{
            width:634px;
            .flf;
            //图片列表
            .imgList{
                width:72px;
                height:450px;
                .flf;
                li{
                    //防止 hover边框抖动
                    border:1px solid #E5E6E6;
                    padding:1px;
                    margin:5px 0;
                    .zfx(70px);
                    &:hover{
                        padding:0;
                        border:2px solid @redcolor;
                    }
                }
                .arrow{
                    .dsb;
                    width:72px;
                    height:15px;
                    //箭头
                    .upArrow{
                       .dsb;
                       width:72px;
                       height:5px;
                       background: url(../Img/sprite0725.png) no-repeat -3270px 0; 
                    }
                    //向下箭头
                    .downArrow{
                        .dsb;
                       margin-top:15px;
                       width:72px;
                       height:5px;
                       background: url(../Img/sprite0725.png) no-repeat -1927px 0;
                    }                
                }
            }
            //右边大图展示
             .bigImg{
                 width:400px;
                 height:400px;
                 .flf;
                 margin:20px 40px 0 80px;
                 border:1px solid #E5E6E6;
             }
        }
        //右边价格展示
        .right{
            .flr;
            width:566px;
            padding-bottom:20px;
            .priceArea{
                .posr;
                .priceTitle{
                    padding:15px 0;
                    p{
                        color:@redcolor;
                        span{
                            font-size:25px;
                            .ff;
                        }
                    }
                }
                .cartMsg{
                    display: none;
                    width:498px;
                    height:157px;
                    .posb(-1,70px);
                    border:1px solid @redcolor;
                    background:white;
                    .msgtitle{
                        height:42px;
                        font-size:15px;
                        padding:0 30px;
                        line-height: 42px;
                        background: @redcolor;
                        color:white;
                        .titleleft{
                            .flf;
                        }
                        .titleright{
                            .flr;
                            .dsb;
                            .zfx(14px);
                            cursor: pointer;
                            margin-top:12px;
                            background: url(../Img/vanclsprite2.png) no-repeat -369px -113px;
                        }
                    }
                    .cartcontent{
                        width:444px;
                        height:78px;
                        padding:19px 27px;
                        .contentleft{
                            width:236px;
                            height:75px;
                            .flf;
                            .lefticon{
                                .flf;
                                padding-right:10px;
                                width:75px;
                                height:75px;
                                background: url(../Img/vanclsprite2.png) no-repeat -232px -119px;
                            }
                            .lefttext{
                                font-size:14px;
                                line-height: 22px;
                                margin-top:15px;
                                margin-left:20px;
                                padding-left:20px;
                                border-left:1px solid @redcolor;
                                .flf;
                                .count{
                                    padding:0 5px;
                                    color:@redcolor;
                                }
                                .countmoney{
                                    padding:0 5px;
                                    color:@redcolor;
                                }
                            }
                        }
                        .contentright{
                            width:166px;
                            height:32px;
                            .flr;
                            margin-top:10px;
                            .keepshop{
                                width:50%;
                                background:#EFEFEF;
                                font-size:13px;
                                font-weight: 700;
                                text-align: center;
                                line-height: 32px;
                                .flf;
                                a{
                                    color:#333;    
                                }
                                
                            }
                            .gocart{
                                width:50%;
                                background:@redcolor;
                                font-size:13px;
                                font-weight: 700;
                                text-align: center;
                                line-height: 32px;
                                .flr;
                                a{
                                    color:white;
                                }
                            }
                        }
                    }
                }
            }
            .proColor{
                color:#666;
                .of;
                cursor: pointer;
                span{
                    .flf;
                }
                .colorThumb{
                    float:left;
                    width:530px;
                     //每个颜色缩略图
                    li{
                        &:hover{
                            border:1px solid @redcolor;
                        }
                         border: 1px solid #b4b4b4;
                        cursor: pointer;
                        display: inline;
                        float: left;
                        height: 40px;
                        margin: 0 8px 8px 0;
                        position: relative;
                        width: 95px;
                        font-family: "微软雅黑";
                        .img{
                            display: block;
                            .flf;
                            width:36px;
                            height:37px;
                        }
                        text-align: center;
                           line-height: 40px;
                           font-size:18px;
                           
                        .proName{
                           .ff;
                           margin-left:20px;
                        }
                    }
                }
               
            }
            //商品尺码
            .proSize{
                margin-top:15px;
                color:#666;
                cursor: pointer;
                .of;
                span{
                    .flf;
                    margin-top:5px;
                }
                li{
                    color:black;
                    .tcc(28px);
                    .zfx(28px);
                    border:1px solid @bordercolor;
                    .flf;
                    margin-left:5px;
                    &:hover{
                        border:1px solid @redcolor;
                    }
                }
            }
            //选购数量
            .proCount{
                margin-top:20px;
                height:30px;
                cursor: pointer;
                span{
                    color:#666;
                    line-height: 25px;
                }
                select{
                    width:60px;
                    margin-top:2px;
                }
            }
            //已选
            .currentSelect{
                margin-top:15px;
                height:30px;
                span{
                    color:#666;
                    line-height: 25px;
                }
                strong{
                    color:#777
                }
                .isStork{
                    color:@redcolor;
                    margin-left:10px;
                }
            }
            //按钮组
            .btnArea{
                height:35px;
                line-height: 35px;
                margin-top:10px;
                a{
                    .dsb;
                }
                //立即购买
                #nowBuy{
                    .flf;
                    width:168px;
                    height:33px;
                    line-height: 33px;
                    font-size:15px;
                    background:#F7ABAF;
                    color:#B71B21;
                    .tcc(31px);
                    border:1px solid #B71B21; 
                    margin-right:15px;
                }
                //加入购物车
                #addCart{
                    .flf;
                    width:168px;
                    height:33px;
                    background: url(../Img/vanclsprite2.png) -147px -285px;
                    color:white;
                    .tcc(31px);
                    
                }
            }
            //优惠提示
            .prompt{
                margin-top:40px;
                width:380px;
                border:1px solid @redcolor;
                border-left:none;
                border-right:none;
                padding:15px;
                .posr;
                p{
                    color:@redcolor;
                    background:white;
                    padding:0 10px;
                    font-size: 13px;
                    .posa(-10px,155px);
                }
                li{
                    color:#666;
                }
            }
        }
          // 产品展示区
    .proShow{
        .clear;
        border-top:1px solid #E5E6E6;
        //产品描述
        .desc{
            margin-top:20px;
            h4{
                color:#777;
                margin-bottom: 10px;
            }
            p{
                color:#666;
                text-indent: 2em;
                line-height: 20px;
                margin-bottom:20px;
            }
            border-bottom:1px dotted #888;            
        }
        
        //产品属性
        .proProperty{
            padding:20px 0;
             h4{
                color:#777;
                margin-bottom: 10px;
            }
            //属性列表
            .proList{
                .of;
                padding:10px 25px;
                background:#F9F9F9;
                line-height: 20px;
                li{
                    .flf;
                    width:180px;
                    margin-right:10px;
                    span{
                        color:@redcolor;
                    }
                }
            }
        }
        // 洗涤说明
        .washMan{
            .of;
            h4{
                color:#777;
                margin-bottom: 10px;
            }
            li{
                width:60px;
                height:80px;
                margin:0 10px;
                .flf;
                &.washImg1{
                    background: url(../Img/washMan.jpg) no-repeat 0 0;
                }
                 &.washImg2{
                    background: url(../Img/washMan.jpg) no-repeat 0 -160px;
                }
                 &.washImg3{
                    background: url(../Img/washMan.jpg) no-repeat 0 -240px;
                }
                 &.washImg4{
                    background: url(../Img/washMan.jpg) no-repeat 0 -320px;
                }
                 &.washImg5{
                    background: url(../Img/washMan.jpg) no-repeat 0 -400px;
                }
                 &.washImg6{
                    background: url(../Img/washMan.jpg) no-repeat 0 -480px;
                }
            }
            
        }
    }
    //产品尺寸列表
    .proSizeTable{
        .clear;
        margin-top:20px;
         h4{
             color:#777;
             margin-bottom: 10px;
            }
         table{
             text-align: center;
             width:1200px;
             color:#999999;
             border:1px solid #E4E4E4;
             td{
                 padding:8px 0;
                 border:1px solid #E4E4E4; 
             }
         }
    }
    
    //商品大图片展示区
    .proBigCenter{
        margin-top:20px;
        margin-bottom:50px;
        h4{
             color:#777;
             margin-bottom: 10px;
            }
        .imgCetner{
            
        }
    }
    
    
   }
   //评论区
    .comment{
        position: relative;
        //热销商品
        h4{
            font-size:12px;
            font-weight: 300;
            position:absolute;
            padding:0 10px;
            background:white;
            top:-6px;
            left:20px;
        }
        //评论区左边热销商品
        .hotPro{
               border: 1px solid #bbbbbb;
                height: auto;
                padding-bottom: 30px;
                padding-left: 34px;
                padding-top: 30px;
                width:164px;
                position: relative;
                .flf;
                li{
                   
                     height: 200px;
                    margin-bottom: 25px;
                    width: 130px;
                    a{
                        img{
                             display: block;
                            left: -14px;
                            position: relative;
                            width: 160px;
                        }
                    }
                   .proTitle{
                       text-align: center;
                       .proName{
                           color:#666;
                           line-height:20px;
                       }
                       .proPrice{
                           color:@redcolor;
                           line-height:20px;
                           font-weight: bold;
                       }
                   }
                } 
        }
        //评论区
        .commentCenter{
            padding:30px;
            .flr;
            .posr;
            width:920px;
            border:1px solid #bbbbbb;
            .title{
                padding:0 10px;
                .posa(-18px,20px);
            }
            //回复标签
            .tags{
                .of;
                .flf;
                li{
                    height:28px;
                    .flf;
                    text-align: center;
                    padding:0 19px;
                    line-height: 28px;
                    background:#EFEFEF;
                    border:1px solid #B4B4B4;
                    margin-right:20px;
                    &.selected{
                        border:1px solid @redcolor;
                        background:@redcolor;
                        color:white;
                    }
                }
            }
            //评论按钮
            .commentBtn{
                .flr;
                a{
                    .dsb;
                    color:white;
                    height:28px;
                    padding:2px 30px;
                    line-height: 28px;
                    background:#D46A6A;    
                }
            }
        }
        //评论内容
        .comments{
            margin-top:20px;
            border-top:1px dotted #999;
            border-bottom:1px dotted #999;
            .of;
            
            //详细评论内容
            .commentDesc{
                .of;
                border-bottom:1px dotted #999;
            }
            .leftStr{
                width:590px;
                margin-top:25px;
                .flf;
                .time{
                    color:#999;
                    margin-top:18px;
                }
            }
        }
        //右边类型
        .rightType{
            .flf;
            margin-top:25px;
            li{
                color:#333;
                height:20px;
                line-height: 20px;
                &.isok{
                    padding-top:15px;
                    
                }
            }
        }
        //会员信息
        .member{
            .flr;
            width:156px;
            height:160px;
            border-left:1px dotted #999;
            p{
                text-align: center;
                line-height: 156px;
            }
             .username{
                .posr;
                 .vipIcon{
                        .posa(25px,30%);
                        .dsb;
                        display:relative;
                        width:42px;
                        height:14px;
                        background: url(../Img/sprite0725.png) no-repeat -192px -320px;
                  }    
             }
        }
    }
    //分页
    .commentPage{
       padding:15px 0;
       .flr;
       a{
           .flf;
           margin:0 0 0 5px;
       }
       ul{
           .flf;
           li{
               .flf;
               margin:0px 5px;
           }
       }
    }
    //提问表单
        .qaform{
            display: none;
            .fromcenter{
                width:630px;
                height:125px;
                margin-top: 20px;
                .form-group{
                    #dosubmit{
                        display: inline-block;
                        width: 97px;
                        height:27px;
                        background: url(../Img/sprite0725.png) no-repeat -1916px -401px;
                    }
                    .of;
                    margin-top:10px;
                    label{
                    width:65px;
                    .flf;
                    font-size: 13px;
                    font-weight: 700;
                        color:#333;
                }
                    input{
                        .flf;
                    }
                    textarea{
                        font-size: 13px;
                        padding:5px;
                        .flf;
                        width:550px;
                        height:70px;
                        border:1px solid #A6B2CA;
                    }
                    }
                
            }
            .title{
                height:20px;
                p{
                    font-size:14px;
                    color:#333;
                    letter-spacing: 1px;
                    font-weight: 700;
                    width:100%; 
                    font-family: 宋体;
                }
                p:after{
                    content:'';
                    display: block;
                    width:14px;
                    height:16px;
                    background: url(../Img/sprite0725.png) no-repeat -1902px -401px;
                    .flf;
//                  margin-top:5px;?
                    margin-right:5px;
                }
                line-height: 20px;
            }
            .titlebottom{
                margin-top:5px;
                width:100%;
                background: url(../Img/sprite0725.png) no-repeat  -1902px bottom;
                height:2px;
            }
            .flr;
            margin-top:20px;
            width:960px;
            height:208px;
            padding:0 10px;
            border:1px solid #CFCFCF;
        }
    //提问回答区域
    .qa{
        
        .flr;
        padding:10px 32px;
        width: 916px;
        margin-top:20px;
        border:1px solid @bordercolor;
        .posr;
        .title{
            padding:0 10px;
            background:white;
            .posa(-18px,20px);
        }
        .qaTop{
            padding:5px 0;
            border-bottom:1px dotted #999;
            height:45px;
            //qa我的提问按钮
            .qaBtn{
                .dsb;
                .flr;
                background:#D46A6A;
                line-height: 35px;
                color:white;
                padding:0 40px;
                height:35px;
            }
        }
        //所有提问列表
        .qaStr{
            .of;
            border-bottom: 1px dotted #999;
            padding-bottom:20px;
            margin-top:15px;
             //提问
             .q{
                 .flf;
                 .qstr{
                     margin-right:15px;
                     .flf;
                     .dsb;
                     font-size:14px;
                     .zfx(20px);
                     color:white;
                     line-height: 15px;
                     text-align: center;
                     background:@redcolor;
                 }
             }
             .times{
                 color:#999;
                 .flr;
                 margin-right:40px;
             }
             .answer{
                 a{
                    color:#888;    
                 }
                   .flr;
             }
            .a{
                margin-top:25px;
                color:#555;
                line-height: 20px;
                .qstr{
                     margin-right:15px;
                     .flf;
                     .dsb;
                     font-size:14px;
                     .zfx(20px);
                     color:white;
                     line-height: 15px;
                     text-align: center;
                     background:#D46A6A;
                 }
            }
        }
        .qapage{
            .flr;
            margin-top:20px;
            padding-bottom:10px;
            a,ul{
                .flf;
                font-size:14px;
                &.active{
                    color:@redcolor;
                }
            }
            li{
                margin-right:10px;
                .flf;
            }
        }
    }
  
}
 .select{
       border:2px solid @redcolor !important;
 }
.arrowSelect{
    display: block;
    width:12px;
    height:12px;
    position: absolute;
    bottom:0px;
    right:0px;
    background: url(../Img/vanclsprite2.png) no-repeat -388px -115px;
}

/**
  *  评论窗口 
  */
  #commentBox{
      .form-group{
          .unit{
              font-size: 15px;
              margin-left:10px;
          }
          padding:5px;
          height:30px;
          margin:10px 0px;
          label{
              height:30px;
              width:80px;
              .ff;
              font-size: 16px;
              .flf;
              line-height: 30px;
              text-align: center;
          }
          textarea{
              width:370px;
              height:70px;
              border:1px solid #B81B22;
              padding:10px;
          }
          input{
              height:28px;
              border:1px solid #B81B22;
              text-indent: 5px;
              width:80px;
              margin-top:2px;
          }
          .submit{
              width:63px;
              height:28px;
              border:none;
              background: url(../Img/sprite0725.png) no-repeat -2013px -401px;
          }
      }
     position:fixed;
     border-radius: 5px;
    top:45%;
    left:45%;
    margin:-150px 0 0 -200px;
    width:600px;
    height:350px;
    background: white;
    border:1px solid #B81B22;
    padding:10px;
    .title{
            
           
                height:20px;
                .ptitle{
                    .flf;
                    height:20px;
                    font-size:14px;
                    color:#333;
                    letter-spacing: 1px;
                    font-weight: 700;
                    width:100%; 
                    #closewindow{
                        .flr;
                        color:@redcolor;
                    }
                }
                 
                .ptitle:after{
                    content:'';
                    display: block;
                    width:14px;
                    height:16px;
                    background: url(../Img/sprite0725.png) no-repeat -1902px -401px;
                    .flf;
//                  margin-top:5px;?
                    margin-right:5px;
                }
                line-height: 20px;
                 .titlebottom{
                margin-top:5px;
                width:100%;
                background: url(../Img/sprite0725.png) no-repeat  -1902px bottom;
                height:2px;
            }
            }
    
    
  }
